<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图标</title>
    <link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
    <link href="{{ url_for('static', filename='plugins/bootstrap-table/bootstrap-table.css') }}" rel="stylesheet">
    <link href="{{ url_for('static', filename='plugins/font-awesome/css/font-awesome.css') }}" rel="stylesheet">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/public.css') }}">
    <style>
        body{
            overflow: auto;
        }
        .iconBox{
            height: 100px;
            position: relative;
            text-align: center;
            color: #5f6c78;
        }
        .iconBox:hover{
            color: #fff;
            background-color: #62a8ea;
        }
        .iconItem i{
            font-size: 24px;
        }
        .icon-name {
            font-size: 14px;
            -webkit-user-select: text;
            -moz-user-select: text;
            -ms-user-select: text;
            user-select: text;
        }
        .vertical-align:before {
            display: inline-block;
            height: 100%;
            vertical-align: middle;
            content: "";
        }
        .vertical-align-middle {
            display: inline-block;
            max-width: 100%;
            font-size: 14px;
            vertical-align: middle;
        }
        .range{
            position: relative;
            float: left;
            width: 300px;
            height: 50px;
        }
        .range {
            position: relative;
        }
        .range input[type=range] {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            padding: 0;
            width: 100%;
            height: 22px;
            cursor: pointer;
            display: block;
        }
        .range input[type=range]:focus {
            outline: none;
        }
        .range input[type=range][disabled] {
            opacity: .3;
            cursor: default;
        }
        .range .rangeslider {
            position: relative;
            height: 22px;
            cursor: pointer;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
        .range .rangeslider:before {
            box-sizing: border-box;
            width: 100%;
            height: 4px;
            background: #e6e6e6;
            border-radius: 100px;
            content: "";
            position: absolute;
            top: 50%;
            -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
        }
        .range input::-webkit-slider-runnable-track {
            box-sizing: border-box;
            width: 100%;
            height: 4px;
            background: #e6e6e6;
            border-radius: 100px;
            margin: 11px 0;
        }
        .range input::-moz-range-track {
            box-sizing: border-box;
            width: 100%;
            height: 4px;
            background: #e6e6e6;
            border-radius: 100px;
            margin: 11px 0;
        }
        .range input::-ms-track {
            box-sizing: border-box;
            width: 100%;
            height: 4px;
            background: #e6e6e6;
            border-radius: 100px;
            color: transparent;
            padding: 11px 0;
            background: transparent;
            border-color: transparent;
        }
        .range input::-ms-fill-lower,
        .range input::-ms-fill-upper {
            box-sizing: border-box;
            width: 100%;
            height: 4px;
            background: #e6e6e6;
            border-radius: 100px;
        }
        .range input::-ms-fill-lower {
            background: #60cd18;
        }
        .range .rangeslider-fill-lower {
            background-color: #60cd18;
            border-radius: 100px;
            position: absolute;
            top: 50%;
            -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
            height: 4px;
            will-change: width;
        }
        .range input::-webkit-slider-thumb {
            box-sizing: border-box;
            box-shadow: 0px 4px 25px rgba(0, 0, 0, 0.5);
            border: 6px solid #fff;
            height: 24px;
            width: 24px;
            border-radius: 100px;
            background: #333940;
            cursor: pointer;
            -webkit-appearance: none;
            appearance: none;
            -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
            margin-top: 2px;
        }
        .range input::-moz-range-thumb {
            box-sizing: border-box;
            box-shadow: 0px 4px 25px rgba(0, 0, 0, 0.5);
            border: 6px solid #fff;
            height: 24px;
            width: 24px;
            border-radius: 100px;
            background: #333940;
            cursor: pointer;
        }
        .range input::-ms-thumb {
            box-sizing: border-box;
            box-shadow: 0px 4px 25px rgba(0, 0, 0, 0.5);
            border: 6px solid #fff;
            height: 24px;
            width: 24px;
            border-radius: 100px;
            background: #333940;
            cursor: pointer;
        }
        .range .rangeslider-thumb {
            box-sizing: border-box;
            box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.5);
            border: 6px solid #fff;
            height: 20px;
            width: 20px;
            border-radius: 100px;
            background: #333940;
            cursor: pointer;
            position: absolute;
            -ms-touch-action: pan-x;
            touch-action: pan-x;
            top: 50%;
            -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
            will-change: left;
        }
        .range .range-output {
            position: absolute;
            left: 6px;
            top: 6px;
            -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
            -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            transition: -webkit-transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
        .range .range-output .output {
            display: block;
            position: absolute;
            height: 25px;
            line-height: 25px;
            min-width: 25px;
            padding: 0 2px;
            top: -26px;
            -webkit-transform: translate(-50%, -100%);
            transform: translate(-50%, -100%);
            background: #383c42;
            color: #fff;
            border-radius: 4px;
            white-space: nowrap;
            font-size: 12px;
            text-align: center;
        }
        .range .range-output .output:before {
            content: "";
            position: absolute;
            bottom: -5px;
            left: 50%;
            border: 6px solid #383c42;
            border-bottom: none;
            border-left-color: transparent;
            border-right-color: transparent;
            -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
        }
        body {
            font-family: Helvetica Neue, Helvetica, Arial;
            font-weight: 300;
        }
        main {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            height: 100vh;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            color: #333;
        }
    </style>
</head>
<body>
<div style="padding-top: 20px">
    <div style="float: left;margin-right: 20px">
        <input class="form-control form-manage" style="width: 250px;margin:0 20px;">
        <div class="range" style="margin-top: 40px">
            <input id="range" type="range" min="16" max="64" value="24">
            <div class="range-output">
                <output class="output" name="output" for="range">24</output>
            </div>
        </div>
    </div>
    <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4 iconBox vertical-align">
        <div class="iconItem vertical-align-middle">
            <i class="fa fa-automobile" aria-hidden="true"></i>
            <div class="icon-name">dashboard</div>
        </div>
    </div>
    <div class="container-fluid">
        <section id="new" class="mainParts">
            <h2 class="page-header" style="margin-top: 100px">4.7.0版新增41个全新的图标</h2>
            <div class="row fontawesome-icon-list">
                <div class="fa-hover col-md-3 col-sm-4" id="box">
                    <a class="col-xs-11"><i class="fa fa-address-book" aria-hidden="true"></i> address-book</a>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-address-book-o" aria-hidden="true"></i> address-book-o</a>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-address-card" aria-hidden="true"></i> address-card</a>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-address-card-o" aria-hidden="true"></i> address-card-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-bandcamp" aria-hidden="true"></i> bandcamp</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-bath" aria-hidden="true"></i>
                        <span class="sr-only">Example of </span>bath</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-bathtub" aria-hidden="true"></i> bathtub <span class="text-muted">(alias)</span></a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-drivers-license" aria-hidden="true"></i> drivers-license <span class="text-muted">(alias)</span></a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-drivers-license-o" aria-hidden="true"></i> drivers-license-o <span class="text-muted">(alias)</span></a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-eercast" aria-hidden="true"></i> eercast</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-envelope-open" aria-hidden="true"></i> envelope-open</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-envelope-open-o" aria-hidden="true"></i> envelope-open-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-etsy" aria-hidden="true"></i>
                        <span class="sr-only">Example of </span>etsy</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-free-code-camp" aria-hidden="true"></i> free-code-camp</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-grav" aria-hidden="true"></i>
                        <span class="sr-only">Example of </span>grav</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-handshake-o" aria-hidden="true"></i> handshake-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-id-badge" aria-hidden="true"></i> id-badge</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-id-card" aria-hidden="true"></i> id-card</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-id-card-o" aria-hidden="true"></i> id-card-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-imdb" aria-hidden="true"></i>
                        <span class="sr-only">Example of </span>imdb</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-linode" aria-hidden="true"></i>
                        <span class="sr-only">Example of </span>linode</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-meetup" aria-hidden="true"></i>
                        <span class="sr-only">Example of </span>meetup</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-microchip" aria-hidden="true"></i> microchip</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-podcast" aria-hidden="true"></i> podcast</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-quora" aria-hidden="true"></i>
                        <span class="sr-only">Example of </span>quora</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-ravelry" aria-hidden="true"></i> ravelry</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-s15" aria-hidden="true"></i>
                        <span class="sr-only">Example of </span>s15 <span class="text-muted">(alias)</span></a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-shower" aria-hidden="true"></i>
                        <span class="sr-only">Example of </span>shower</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-snowflake-o" aria-hidden="true"></i> snowflake-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-superpowers" aria-hidden="true"></i> superpowers</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-telegram" aria-hidden="true"></i> telegram</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-thermometer" aria-hidden="true"></i> thermometer <span class="text-muted">(alias)</span></a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-thermometer-0" aria-hidden="true"></i> thermometer-0 <span class="text-muted">(alias)</span></a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-thermometer-1" aria-hidden="true"></i> thermometer-1 <span class="text-muted">(alias)</span></a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-thermometer-2" aria-hidden="true"></i> thermometer-2 <span class="text-muted">(alias)</span></a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-thermometer-3" aria-hidden="true"></i> thermometer-3 <span class="text-muted">(alias)</span></a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-thermometer-4" aria-hidden="true"></i> thermometer-4 <span class="text-muted">(alias)</span></a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-thermometer-empty" aria-hidden="true"></i> thermometer-empty</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-thermometer-full" aria-hidden="true"></i> thermometer-full</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-thermometer-half" aria-hidden="true"></i> thermometer-half</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-thermometer-quarter" aria-hidden="true"></i> thermometer-quarter</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-thermometer-three-quarters" aria-hidden="true"></i> thermometer-three-quarters</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-times-rectangle" aria-hidden="true"></i> times-rectangle <span class="text-muted">(alias)</span></a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-times-rectangle-o" aria-hidden="true"></i> times-rectangle-o <span class="text-muted">(alias)</span></a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-user-circle" aria-hidden="true"></i> user-circle</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-user-circle-o" aria-hidden="true"></i> user-circle-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-user-o" aria-hidden="true"></i>
                        <span class="sr-only">Example of </span>user-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-vcard" aria-hidden="true"></i>
                        <span class="sr-only">Example of </span>vcard <span class="text-muted">(alias)</span></a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-vcard-o" aria-hidden="true"></i> vcard-o <span class="text-muted">(alias)</span></a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-window-close" aria-hidden="true"></i> window-close</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-window-close-o" aria-hidden="true"></i> window-close-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-window-maximize" aria-hidden="true"></i> window-maximize</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-window-minimize" aria-hidden="true"></i> window-minimize</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-window-restore" aria-hidden="true"></i> window-restore</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-wpexplorer" aria-hidden="true"></i> wpexplorer</a> </div>
            </div>
        </section>
        <section id="web-application" class="mainParts">
            <h2 class="page-header">网页</h2>
            <div class="row fontawesome-icon-list">
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-address-book" aria-hidden="true"></i> address-book</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-address-book-o" aria-hidden="true"></i> address-book-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-address-card" aria-hidden="true"></i> address-card</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-address-card-o" aria-hidden="true"></i> address-card-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-adjust" aria-hidden="true"></i> adjust</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-american-sign-language-interpreting" aria-hidden="true"></i> american-sign-language-interpreting</a>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-anchor" aria-hidden="true"></i> anchor</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-archive" aria-hidden="true"></i> archive</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-area-chart" aria-hidden="true"></i> area-chart</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-arrows" aria-hidden="true"></i> arrows</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-arrows-h" aria-hidden="true"></i> arrows-h</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-arrows-v" aria-hidden="true"></i> arrows-v</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-asl-interpreting" aria-hidden="true"></i> asl-interpreting <span class="text-muted">(alias)</span></a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-assistive-listening-systems" aria-hidden="true"></i> assistive-listening-systems</a>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-asterisk" aria-hidden="true"></i> asterisk</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-at" aria-hidden="true"></i>
                        <span class="sr-only">Example of </span>at</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-audio-description" aria-hidden="true"></i> audio-description</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-automobile" aria-hidden="true"></i> automobile <span class="text-muted">(alias)</span></a>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-balance-scale" aria-hidden="true"></i> balance-scale</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-ban" aria-hidden="true"></i> ban</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-bank" aria-hidden="true"></i> bank <span class="text-muted">(alias)</span></a>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-bar-chart" aria-hidden="true"></i> bar-chart</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-bar-chart-o" aria-hidden="true"></i> bar-chart-o <span class="text-muted">(alias)</span></a>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-barcode" aria-hidden="true"></i> barcode</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-bars" aria-hidden="true"></i> bars</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-bath" aria-hidden="true"></i> bath</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-bathtub" aria-hidden="true"></i> bathtub <span class="text-muted">(alias)</span></a>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-battery" aria-hidden="true"></i> battery <span class="text-muted">(alias)</span></a>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-battery-0" aria-hidden="true"></i> battery-0 <span class="text-muted">(alias)</span></a>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-battery-1" aria-hidden="true"></i> battery-1 <span class="text-muted">(alias)</span></a>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-battery-2" aria-hidden="true"></i> battery-2 <span class="text-muted">(alias)</span></a>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-battery-3" aria-hidden="true"></i> battery-3 <span class="text-muted">(alias)</span></a>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-battery-4" aria-hidden="true"></i> battery-4 <span class="text-muted">(alias)</span></a>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-battery-empty" aria-hidden="true"></i> battery-empty</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-battery-full" aria-hidden="true"></i> battery-full</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-battery-half" aria-hidden="true"></i> battery-half</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-battery-quarter" aria-hidden="true"></i> battery-quarter</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-battery-three-quarters" aria-hidden="true"></i> battery-three-quarters</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-bed" aria-hidden="true"></i> bed</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-beer" aria-hidden="true"></i> beer</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-bell" aria-hidden="true"></i> bell</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-bell-o" aria-hidden="true"></i> bell-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-bell-slash" aria-hidden="true"></i> bell-slash</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-bell-slash-o" aria-hidden="true"></i> bell-slash-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-bicycle" aria-hidden="true"></i> bicycle</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-binoculars" aria-hidden="true"></i> binoculars</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-birthday-cake" aria-hidden="true"></i> birthday-cake</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-blind" aria-hidden="true"></i> blind</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-bluetooth" aria-hidden="true"></i> bluetooth</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-bluetooth-b" aria-hidden="true"></i> bluetooth-b</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-bolt" aria-hidden="true"></i> bolt</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-bomb" aria-hidden="true"></i> bomb</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-book" aria-hidden="true"></i> book</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-bookmark" aria-hidden="true"></i> bookmark</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-bookmark-o" aria-hidden="true"></i> bookmark-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-braille" aria-hidden="true"></i> braille</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-briefcase" aria-hidden="true"></i> briefcase</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-bug" aria-hidden="true"></i> bug</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-building" aria-hidden="true"></i> building</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-building-o" aria-hidden="true"></i> building-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-bullhorn" aria-hidden="true"></i> bullhorn</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-bullseye" aria-hidden="true"></i> bullseye</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-bus" aria-hidden="true"></i> bus</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-cab" aria-hidden="true"></i> cab <span class="text-muted">(alias)</span></a>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-calculator" aria-hidden="true"></i> calculator</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-calendar" aria-hidden="true"></i> calendar</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-calendar-check-o" aria-hidden="true"></i> calendar-check-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-calendar-minus-o" aria-hidden="true"></i> calendar-minus-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-calendar-o" aria-hidden="true"></i> calendar-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-calendar-plus-o" aria-hidden="true"></i> calendar-plus-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-calendar-times-o" aria-hidden="true"></i> calendar-times-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-camera" aria-hidden="true"></i> camera</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-camera-retro" aria-hidden="true"></i> camera-retro</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-car" aria-hidden="true"></i> car</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-caret-square-o-down" aria-hidden="true"></i> caret-square-o-down</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-caret-square-o-left" aria-hidden="true"></i> caret-square-o-left</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-caret-square-o-right" aria-hidden="true"></i> caret-square-o-right</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-caret-square-o-up" aria-hidden="true"></i> caret-square-o-up</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-cart-arrow-down" aria-hidden="true"></i> cart-arrow-down</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-cart-plus" aria-hidden="true"></i> cart-plus</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-cc" aria-hidden="true"></i>
                        <span class="sr-only">Example of </span>cc</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-certificate" aria-hidden="true"></i> certificate</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-check" aria-hidden="true"></i> check</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-check-circle" aria-hidden="true"></i> check-circle</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-check-circle-o" aria-hidden="true"></i> check-circle-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-check-square" aria-hidden="true"></i> check-square</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-check-square-o" aria-hidden="true"></i> check-square-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-child" aria-hidden="true"></i> child</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-circle" aria-hidden="true"></i> circle</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-circle-o" aria-hidden="true"></i> circle-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-circle-o-notch" aria-hidden="true"></i> circle-o-notch</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-circle-thin" aria-hidden="true"></i> circle-thin</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-clock-o" aria-hidden="true"></i> clock-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-clone" aria-hidden="true"></i> clone</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-close" aria-hidden="true"></i> close <span class="text-muted">(alias)</span></a>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-cloud" aria-hidden="true"></i> cloud</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-cloud-download" aria-hidden="true"></i> cloud-download</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-cloud-upload" aria-hidden="true"></i> cloud-upload</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-code" aria-hidden="true"></i> code</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-code-fork" aria-hidden="true"></i> code-fork</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-coffee" aria-hidden="true"></i> coffee</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-cog" aria-hidden="true"></i> cog</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-cogs" aria-hidden="true"></i> cogs</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-comment" aria-hidden="true"></i> comment</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-comment-o" aria-hidden="true"></i> comment-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-commenting" aria-hidden="true"></i> commenting</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-commenting-o" aria-hidden="true"></i> commenting-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-comments" aria-hidden="true"></i> comments</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-comments-o" aria-hidden="true"></i> comments-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-compass" aria-hidden="true"></i> compass</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-copyright" aria-hidden="true"></i> copyright</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-creative-commons" aria-hidden="true"></i> creative-commons</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-credit-card" aria-hidden="true"></i> credit-card</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-credit-card-alt" aria-hidden="true"></i> credit-card-alt</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-crop" aria-hidden="true"></i> crop</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-crosshairs" aria-hidden="true"></i> crosshairs</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-cube" aria-hidden="true"></i> cube</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-cubes" aria-hidden="true"></i> cubes</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-cutlery" aria-hidden="true"></i> cutlery</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-dashboard" aria-hidden="true"></i> dashboard <span class="text-muted">(alias)</span></a>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-database" aria-hidden="true"></i> database</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-deaf" aria-hidden="true"></i> deaf</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-deafness" aria-hidden="true"></i> deafness <span class="text-muted">(alias)</span></a>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-desktop" aria-hidden="true"></i> desktop</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-diamond" aria-hidden="true"></i> diamond</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-dot-circle-o" aria-hidden="true"></i> dot-circle-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-download" aria-hidden="true"></i> download</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-drivers-license" aria-hidden="true"></i> drivers-license <span class="text-muted">(alias)</span></a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-drivers-license-o" aria-hidden="true"></i> drivers-license-o <span class="text-muted">(alias)</span></a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-edit" aria-hidden="true"></i> edit <span class="text-muted">(alias)</span></a>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-ellipsis-h" aria-hidden="true"></i> ellipsis-h</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-ellipsis-v" aria-hidden="true"></i> ellipsis-v</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-envelope" aria-hidden="true"></i> envelope</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-envelope-o" aria-hidden="true"></i> envelope-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-envelope-open" aria-hidden="true"></i> envelope-open</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-envelope-open-o" aria-hidden="true"></i> envelope-open-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-envelope-square" aria-hidden="true"></i> envelope-square</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-eraser" aria-hidden="true"></i> eraser</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-exchange" aria-hidden="true"></i> exchange</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-exclamation" aria-hidden="true"></i> exclamation</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-exclamation-circle" aria-hidden="true"></i> exclamation-circle</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> exclamation-triangle</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-external-link" aria-hidden="true"></i> external-link</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-external-link-square" aria-hidden="true"></i> external-link-square</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-eye" aria-hidden="true"></i> eye</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-eye-slash" aria-hidden="true"></i> eye-slash</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-eyedropper" aria-hidden="true"></i> eyedropper</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-fax" aria-hidden="true"></i> fax</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-feed" aria-hidden="true"></i> feed <span class="text-muted">(alias)</span></a>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-female" aria-hidden="true"></i> female</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-fighter-jet" aria-hidden="true"></i> fighter-jet</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-file-archive-o" aria-hidden="true"></i> file-archive-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-file-audio-o" aria-hidden="true"></i> file-audio-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-file-code-o" aria-hidden="true"></i> file-code-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-file-excel-o" aria-hidden="true"></i> file-excel-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-file-image-o" aria-hidden="true"></i> file-image-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-file-movie-o" aria-hidden="true"></i> file-movie-o <span class="text-muted">(alias)</span></a>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-file-pdf-o" aria-hidden="true"></i> file-pdf-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-file-photo-o" aria-hidden="true"></i> file-photo-o <span class="text-muted">(alias)</span></a>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-file-picture-o" aria-hidden="true"></i> file-picture-o <span class="text-muted">(alias)</span></a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-file-powerpoint-o" aria-hidden="true"></i> file-powerpoint-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-file-sound-o" aria-hidden="true"></i> file-sound-o <span class="text-muted">(alias)</span></a>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-file-video-o" aria-hidden="true"></i> file-video-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-file-word-o" aria-hidden="true"></i> file-word-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-file-zip-o" aria-hidden="true"></i> file-zip-o <span class="text-muted">(alias)</span></a>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-film" aria-hidden="true"></i> film</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-filter" aria-hidden="true"></i> filter</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-fire" aria-hidden="true"></i> fire</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-fire-extinguisher" aria-hidden="true"></i> fire-extinguisher</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-flag" aria-hidden="true"></i> flag</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-flag-checkered" aria-hidden="true"></i> flag-checkered</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-flag-o" aria-hidden="true"></i> flag-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-flash" aria-hidden="true"></i> flash <span class="text-muted">(alias)</span></a>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-flask" aria-hidden="true"></i> flask</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-folder" aria-hidden="true"></i> folder</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-folder-o" aria-hidden="true"></i> folder-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-folder-open" aria-hidden="true"></i> folder-open</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-folder-open-o" aria-hidden="true"></i> folder-open-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-frown-o" aria-hidden="true"></i> frown-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-futbol-o" aria-hidden="true"></i> futbol-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-gamepad" aria-hidden="true"></i> gamepad</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-gavel" aria-hidden="true"></i> gavel</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-gear" aria-hidden="true"></i> gear <span class="text-muted">(alias)</span></a>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-gears" aria-hidden="true"></i> gears <span class="text-muted">(alias)</span></a>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-gift" aria-hidden="true"></i> gift</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-glass" aria-hidden="true"></i> glass</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-globe" aria-hidden="true"></i> globe</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-graduation-cap" aria-hidden="true"></i> graduation-cap</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-group" aria-hidden="true"></i> group <span class="text-muted">(alias)</span></a>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-hand-grab-o" aria-hidden="true"></i> hand-grab-o <span class="text-muted">(alias)</span></a>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-hand-lizard-o" aria-hidden="true"></i> hand-lizard-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-hand-paper-o" aria-hidden="true"></i> hand-paper-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-hand-peace-o" aria-hidden="true"></i> hand-peace-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-hand-pointer-o" aria-hidden="true"></i> hand-pointer-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-hand-rock-o" aria-hidden="true"></i> hand-rock-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-hand-scissors-o" aria-hidden="true"></i> hand-scissors-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-hand-spock-o" aria-hidden="true"></i> hand-spock-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-hand-stop-o" aria-hidden="true"></i> hand-stop-o <span class="text-muted">(alias)</span></a>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-handshake-o" aria-hidden="true"></i> handshake-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-hard-of-hearing" aria-hidden="true"></i> hard-of-hearing <span class="text-muted">(alias)</span></a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-hashtag" aria-hidden="true"></i> hashtag</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-hdd-o" aria-hidden="true"></i> hdd-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-headphones" aria-hidden="true"></i> headphones</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-heart" aria-hidden="true"></i> heart</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-heart-o" aria-hidden="true"></i> heart-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-heartbeat" aria-hidden="true"></i> heartbeat</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-history" aria-hidden="true"></i> history</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-home" aria-hidden="true"></i> home</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-hotel" aria-hidden="true"></i> hotel <span class="text-muted">(alias)</span></a>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-hourglass" aria-hidden="true"></i> hourglass</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-hourglass-1" aria-hidden="true"></i> hourglass-1 <span class="text-muted">(alias)</span></a>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-hourglass-2" aria-hidden="true"></i> hourglass-2 <span class="text-muted">(alias)</span></a>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-hourglass-3" aria-hidden="true"></i> hourglass-3 <span class="text-muted">(alias)</span></a>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-hourglass-end" aria-hidden="true"></i> hourglass-end</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-hourglass-half" aria-hidden="true"></i> hourglass-half</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-hourglass-o" aria-hidden="true"></i> hourglass-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-hourglass-start" aria-hidden="true"></i> hourglass-start</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-i-cursor" aria-hidden="true"></i> i-cursor</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-id-badge" aria-hidden="true"></i> id-badge</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-id-card" aria-hidden="true"></i> id-card</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-id-card-o" aria-hidden="true"></i> id-card-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-image" aria-hidden="true"></i> image <span class="text-muted">(alias)</span></a>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-inbox" aria-hidden="true"></i> inbox</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-industry" aria-hidden="true"></i> industry</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-info" aria-hidden="true"></i> info</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-info-circle" aria-hidden="true"></i> info-circle</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-institution" aria-hidden="true"></i> institution <span class="text-muted">(alias)</span></a>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-key" aria-hidden="true"></i> key</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-keyboard-o" aria-hidden="true"></i> keyboard-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-language" aria-hidden="true"></i> language</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-laptop" aria-hidden="true"></i> laptop</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-leaf" aria-hidden="true"></i> leaf</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-legal" aria-hidden="true"></i> legal <span class="text-muted">(alias)</span></a>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-lemon-o" aria-hidden="true"></i> lemon-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-level-down" aria-hidden="true"></i> level-down</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-level-up" aria-hidden="true"></i> level-up</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-life-bouy" aria-hidden="true"></i> life-bouy <span class="text-muted">(alias)</span></a>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-life-buoy" aria-hidden="true"></i> life-buoy <span class="text-muted">(alias)</span></a>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-life-ring" aria-hidden="true"></i> life-ring</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-life-saver" aria-hidden="true"></i> life-saver <span class="text-muted">(alias)</span></a>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-lightbulb-o" aria-hidden="true"></i> lightbulb-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-line-chart" aria-hidden="true"></i> line-chart</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-location-arrow" aria-hidden="true"></i> location-arrow</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-lock" aria-hidden="true"></i> lock</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-low-vision" aria-hidden="true"></i> low-vision</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-magic" aria-hidden="true"></i> magic</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-magnet" aria-hidden="true"></i> magnet</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-mail-forward" aria-hidden="true"></i> mail-forward <span class="text-muted">(alias)</span></a>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-mail-reply" aria-hidden="true"></i> mail-reply <span class="text-muted">(alias)</span></a>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-mail-reply-all" aria-hidden="true"></i> mail-reply-all <span class="text-muted">(alias)</span></a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-male" aria-hidden="true"></i> male</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-map" aria-hidden="true"></i> map</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-map-marker" aria-hidden="true"></i> map-marker</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-map-o" aria-hidden="true"></i> map-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-map-pin" aria-hidden="true"></i> map-pin</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-map-signs" aria-hidden="true"></i> map-signs</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-meh-o" aria-hidden="true"></i> meh-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-microchip" aria-hidden="true"></i> microchip</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-microphone" aria-hidden="true"></i> microphone</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-microphone-slash" aria-hidden="true"></i> microphone-slash</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-minus" aria-hidden="true"></i> minus</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-minus-circle" aria-hidden="true"></i> minus-circle</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-minus-square" aria-hidden="true"></i> minus-square</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-minus-square-o" aria-hidden="true"></i> minus-square-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-mobile" aria-hidden="true"></i> mobile</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-mobile-phone" aria-hidden="true"></i> mobile-phone <span class="text-muted">(alias)</span></a>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-money" aria-hidden="true"></i> money</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-moon-o" aria-hidden="true"></i> moon-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-mortar-board" aria-hidden="true"></i> mortar-board <span class="text-muted">(alias)</span></a> </span>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-motorcycle" aria-hidden="true"></i> motorcycle</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-mouse-pointer" aria-hidden="true"></i> mouse-pointer</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-music" aria-hidden="true"></i> music</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-navicon" aria-hidden="true"></i> navicon <span class="text-muted">(alias)</span></a> </span>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-newspaper-o" aria-hidden="true"></i> newspaper-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-object-group" aria-hidden="true"></i> object-group</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-object-ungroup" aria-hidden="true"></i> object-ungroup</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-paint-brush" aria-hidden="true"></i> paint-brush</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-paper-plane" aria-hidden="true"></i> paper-plane</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-paper-plane-o" aria-hidden="true"></i> paper-plane-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-paw" aria-hidden="true"></i> paw</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-pencil" aria-hidden="true"></i> pencil</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-pencil-square" aria-hidden="true"></i> pencil-square</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> pencil-square-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-percent" aria-hidden="true"></i> percent</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-phone" aria-hidden="true"></i> phone</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-phone-square" aria-hidden="true"></i> phone-square</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-photo" aria-hidden="true"></i> photo <span class="text-muted">(alias)</span></a> </span>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-picture-o" aria-hidden="true"></i> picture-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-pie-chart" aria-hidden="true"></i> pie-chart</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-plane" aria-hidden="true"></i> plane</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-plug" aria-hidden="true"></i> plug</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-plus" aria-hidden="true"></i> plus</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-plus-circle" aria-hidden="true"></i> plus-circle</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-plus-square" aria-hidden="true"></i> plus-square</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-plus-square-o" aria-hidden="true"></i> plus-square-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-podcast" aria-hidden="true"></i> podcast</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-power-off" aria-hidden="true"></i> power-off</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-print" aria-hidden="true"></i> print</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-puzzle-piece" aria-hidden="true"></i> puzzle-piece</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-qrcode" aria-hidden="true"></i> qrcode</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-question" aria-hidden="true"></i> question</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-question-circle" aria-hidden="true"></i> question-circle</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-question-circle-o" aria-hidden="true"></i> question-circle-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-quote-left" aria-hidden="true"></i> quote-left</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-quote-right" aria-hidden="true"></i> quote-right</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-random" aria-hidden="true"></i> random</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-recycle" aria-hidden="true"></i> recycle</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-refresh" aria-hidden="true"></i> refresh</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-registered" aria-hidden="true"></i> registered</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-remove" aria-hidden="true"></i> remove <span class="text-muted">(alias)</span></a> </span>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-reorder" aria-hidden="true"></i> reorder <span class="text-muted">(alias)</span></a> </span>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-reply" aria-hidden="true"></i> reply</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-reply-all" aria-hidden="true"></i> reply-all</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-retweet" aria-hidden="true"></i> retweet</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-road" aria-hidden="true"></i> road</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-rocket" aria-hidden="true"></i> rocket</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-rss" aria-hidden="true"></i> rss</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-rss-square" aria-hidden="true"></i> rss-square</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-s15" aria-hidden="true"></i> s15 <span class="text-muted">(alias)</span></a> </span>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-search" aria-hidden="true"></i> search</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-search-minus" aria-hidden="true"></i> search-minus</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-search-plus" aria-hidden="true"></i> search-plus</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-send" aria-hidden="true"></i> send <span class="text-muted">(alias)</span></a> </span>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-send-o" aria-hidden="true"></i> send-o <span class="text-muted">(alias)</span></a> </span>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-server" aria-hidden="true"></i> server</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-share" aria-hidden="true"></i> share</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-share-alt" aria-hidden="true"></i> share-alt</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-share-alt-square" aria-hidden="true"></i> share-alt-square</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-share-square" aria-hidden="true"></i> share-square</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-share-square-o" aria-hidden="true"></i> share-square-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-shield" aria-hidden="true"></i> shield</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-ship" aria-hidden="true"></i> ship</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-shopping-bag" aria-hidden="true"></i> shopping-bag</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-shopping-basket" aria-hidden="true"></i> shopping-basket</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-shopping-cart" aria-hidden="true"></i> shopping-cart</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-shower" aria-hidden="true"></i> shower</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-sign-in" aria-hidden="true"></i> sign-in</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-sign-language" aria-hidden="true"></i> sign-language</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-sign-out" aria-hidden="true"></i> sign-out</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-signal" aria-hidden="true"></i> signal</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-signing" aria-hidden="true"></i> signing <span class="text-muted">(alias)</span></a> </span>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-sitemap" aria-hidden="true"></i> sitemap</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-sliders" aria-hidden="true"></i> sliders</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-smile-o" aria-hidden="true"></i> smile-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-snowflake-o" aria-hidden="true"></i> snowflake-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-soccer-ball-o" aria-hidden="true"></i> soccer-ball-o <span class="text-muted">(alias)</span></a> </span>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-sort" aria-hidden="true"></i> sort</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-sort-alpha-asc" aria-hidden="true"></i> sort-alpha-asc</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-sort-alpha-desc" aria-hidden="true"></i> sort-alpha-desc</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-sort-amount-asc" aria-hidden="true"></i> sort-amount-asc</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-sort-amount-desc" aria-hidden="true"></i> sort-amount-desc</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-sort-asc" aria-hidden="true"></i> sort-asc</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-sort-desc" aria-hidden="true"></i> sort-desc</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-sort-down" aria-hidden="true"></i> sort-down <span class="text-muted">(alias)</span></a> </span>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-sort-numeric-asc" aria-hidden="true"></i> sort-numeric-asc</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-sort-numeric-desc" aria-hidden="true"></i> sort-numeric-desc</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-sort-up" aria-hidden="true"></i> sort-up <span class="text-muted">(alias)</span></a> </span>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-space-shuttle" aria-hidden="true"></i> space-shuttle</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-spinner" aria-hidden="true"></i> spinner</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-spoon" aria-hidden="true"></i> spoon</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-square" aria-hidden="true"></i> square</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-square-o" aria-hidden="true"></i> square-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-star" aria-hidden="true"></i> star</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-star-half" aria-hidden="true"></i> star-half</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-star-half-empty" aria-hidden="true"></i> star-half-empty <span class="text-muted">(alias)</span></a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-star-half-full" aria-hidden="true"></i> star-half-full <span class="text-muted">(alias)</span></a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-star-half-o" aria-hidden="true"></i> star-half-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-star-o" aria-hidden="true"></i> star-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-sticky-note" aria-hidden="true"></i> sticky-note</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-sticky-note-o" aria-hidden="true"></i> sticky-note-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-street-view" aria-hidden="true"></i> street-view</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-suitcase" aria-hidden="true"></i> suitcase</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-sun-o" aria-hidden="true"></i> sun-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-support" aria-hidden="true"></i> support <span class="text-muted">(alias)</span></a> </span>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-tablet" aria-hidden="true"></i> tablet</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-tachometer" aria-hidden="true"></i> tachometer</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-tag" aria-hidden="true"></i> tag</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-tags" aria-hidden="true"></i> tags</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-tasks" aria-hidden="true"></i> tasks</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-taxi" aria-hidden="true"></i> taxi</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-television" aria-hidden="true"></i> television</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-terminal" aria-hidden="true"></i> terminal</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-thermometer" aria-hidden="true"></i> thermometer <span class="text-muted">(alias)</span></a> </span>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-thermometer-0" aria-hidden="true"></i> thermometer-0 <span class="text-muted">(alias)</span></a> </span>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-thermometer-1" aria-hidden="true"></i> thermometer-1 <span class="text-muted">(alias)</span></a> </span>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-thermometer-2" aria-hidden="true"></i> thermometer-2 <span class="text-muted">(alias)</span></a> </span>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-thermometer-3" aria-hidden="true"></i> thermometer-3 <span class="text-muted">(alias)</span></a> </span>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-thermometer-4" aria-hidden="true"></i> thermometer-4 <span class="text-muted">(alias)</span></a> </span>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-thermometer-empty" aria-hidden="true"></i> thermometer-empty</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-thermometer-full" aria-hidden="true"></i> thermometer-full</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-thermometer-half" aria-hidden="true"></i> thermometer-half</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-thermometer-quarter" aria-hidden="true"></i> thermometer-quarter</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-thermometer-three-quarters" aria-hidden="true"></i> thermometer-three-quarters</a> </span>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-thumb-tack" aria-hidden="true"></i> thumb-tack</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-thumbs-down" aria-hidden="true"></i> thumbs-down</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-thumbs-o-down" aria-hidden="true"></i> thumbs-o-down</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-thumbs-o-up" aria-hidden="true"></i> thumbs-o-up</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-thumbs-up" aria-hidden="true"></i> thumbs-up</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-ticket" aria-hidden="true"></i> ticket</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-times" aria-hidden="true"></i> times</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-times-circle" aria-hidden="true"></i> times-circle</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-times-circle-o" aria-hidden="true"></i> times-circle-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-times-rectangle" aria-hidden="true"></i> times-rectangle <span class="text-muted">(alias)</span></a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-times-rectangle-o" aria-hidden="true"></i> times-rectangle-o <span class="text-muted">(alias)</span></a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-tint" aria-hidden="true"></i> tint</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-toggle-down" aria-hidden="true"></i> toggle-down <span class="text-muted">(alias)</span></a> </span>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-toggle-left" aria-hidden="true"></i> toggle-left <span class="text-muted">(alias)</span></a> </span>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-toggle-off" aria-hidden="true"></i> toggle-off</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-toggle-on" aria-hidden="true"></i> toggle-on</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-toggle-right" aria-hidden="true"></i> toggle-right <span class="text-muted">(alias)</span></a> </span>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-toggle-up" aria-hidden="true"></i> toggle-up <span class="text-muted">(alias)</span></a> </span>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-trademark" aria-hidden="true"></i> trademark</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-trash" aria-hidden="true"></i> trash</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-trash-o" aria-hidden="true"></i> trash-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-tree" aria-hidden="true"></i> tree</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-trophy" aria-hidden="true"></i> trophy</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-truck" aria-hidden="true"></i> truck</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-tty" aria-hidden="true"></i> tty</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-tv" aria-hidden="true"></i>
                        <span class="sr-only">Example of </span>tv <span class="text-muted">(alias)</span></a> </span>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-umbrella" aria-hidden="true"></i> umbrella</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-universal-access" aria-hidden="true"></i> universal-access</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-university" aria-hidden="true"></i> university</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-unlock" aria-hidden="true"></i> unlock</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-unlock-alt" aria-hidden="true"></i> unlock-alt</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-unsorted" aria-hidden="true"></i> unsorted <span class="text-muted">(alias)</span></a> </span>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-upload" aria-hidden="true"></i> upload</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-user" aria-hidden="true"></i> user</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-user-circle" aria-hidden="true"></i> user-circle</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-user-circle-o" aria-hidden="true"></i> user-circle-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-user-o" aria-hidden="true"></i> user-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-user-plus" aria-hidden="true"></i> user-plus</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-user-secret" aria-hidden="true"></i> user-secret</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-user-times" aria-hidden="true"></i> user-times</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-users" aria-hidden="true"></i> users</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-vcard" aria-hidden="true"></i> vcard <span class="text-muted">(alias)</span></a> </span>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-vcard-o" aria-hidden="true"></i> vcard-o <span class="text-muted">(alias)</span></a> </span>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-video-camera" aria-hidden="true"></i> video-camera</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-volume-control-phone" aria-hidden="true"></i> volume-control-phone</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-volume-down" aria-hidden="true"></i> volume-down</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-volume-off" aria-hidden="true"></i> volume-off</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-volume-up" aria-hidden="true"></i> volume-up</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-warning" aria-hidden="true"></i> warning <span class="text-muted">(alias)</span></a> </span>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-wheelchair" aria-hidden="true"></i> wheelchair</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-wheelchair-alt" aria-hidden="true"></i> wheelchair-alt</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-wifi" aria-hidden="true"></i> wifi</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-window-close" aria-hidden="true"></i> window-close</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-window-close-o" aria-hidden="true"></i> window-close-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-window-maximize" aria-hidden="true"></i> window-maximize</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-window-minimize" aria-hidden="true"></i> window-minimize</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-window-restore" aria-hidden="true"></i> window-restore</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-wrench" aria-hidden="true"></i> wrench</a> </div>
            </div>
        </section>
        <section id="accessibility">
            <h2 class="page-header">辅助功能</h2>
            <div class="row fontawesome-icon-list">
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-american-sign-language-interpreting" aria-hidden="true"></i> american-sign-language-interpreting</a> </span>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-asl-interpreting" aria-hidden="true"></i> asl-interpreting <span class="text-muted">(alias)</span></a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-assistive-listening-systems" aria-hidden="true"></i> assistive-listening-systems</a> </span>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-audio-description" aria-hidden="true"></i> audio-description</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-blind" aria-hidden="true"></i> blind</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-braille" aria-hidden="true"></i> braille</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-cc" aria-hidden="true"></i>
                        <span class="sr-only">Example of </span>cc</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-deaf" aria-hidden="true"></i> deaf</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-deafness" aria-hidden="true"></i> deafness <span class="text-muted">(alias)</span></a> </span>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-hard-of-hearing" aria-hidden="true"></i> hard-of-hearing <span class="text-muted">(alias)</span></a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-low-vision" aria-hidden="true"></i> low-vision</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-question-circle-o" aria-hidden="true"></i> question-circle-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-sign-language" aria-hidden="true"></i> sign-language</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-signing" aria-hidden="true"></i> signing <span class="text-muted">(alias)</span></a> </span>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-tty" aria-hidden="true"></i> tty</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-universal-access" aria-hidden="true"></i> universal-access</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-volume-control-phone" aria-hidden="true"></i> volume-control-phone</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-wheelchair" aria-hidden="true"></i> wheelchair</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-wheelchair-alt" aria-hidden="true"></i> wheelchair-alt</a> </div>
            </div>
        </section>
        <section id="hand" class="mainParts">
            <h2 class="page-header">手势</h2>
            <div class="row fontawesome-icon-list">
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-hand-grab-o" aria-hidden="true"></i> hand-grab-o <span class="text-muted">(alias)</span></a> </span>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-hand-lizard-o" aria-hidden="true"></i> hand-lizard-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-hand-o-down" aria-hidden="true"></i> hand-o-down</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-hand-o-left" aria-hidden="true"></i> hand-o-left</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-hand-o-right" aria-hidden="true"></i> hand-o-right</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-hand-o-up" aria-hidden="true"></i> hand-o-up</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-hand-paper-o" aria-hidden="true"></i> hand-paper-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-hand-peace-o" aria-hidden="true"></i> hand-peace-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-hand-pointer-o" aria-hidden="true"></i> hand-pointer-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-hand-rock-o" aria-hidden="true"></i> hand-rock-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-hand-scissors-o" aria-hidden="true"></i> hand-scissors-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-hand-spock-o" aria-hidden="true"></i> hand-spock-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-hand-stop-o" aria-hidden="true"></i> hand-stop-o <span class="text-muted">(alias)</span></a> </span>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-thumbs-down" aria-hidden="true"></i> thumbs-down</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-thumbs-o-down" aria-hidden="true"></i> thumbs-o-down</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-thumbs-o-up" aria-hidden="true"></i> thumbs-o-up</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-thumbs-up" aria-hidden="true"></i> thumbs-up</a> </div>
            </div>
        </section>
        <section id="transportation" class="mainParts">
            <h2 class="page-header">运输</h2>
            <div class="row fontawesome-icon-list">
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-ambulance" aria-hidden="true"></i> ambulance</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-automobile" aria-hidden="true"></i> automobile <span class="text-muted">(alias)</span></a> </span>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-bicycle" aria-hidden="true"></i> bicycle</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-bus" aria-hidden="true"></i> bus</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-cab" aria-hidden="true"></i> cab <span class="text-muted">(alias)</span></a> </span>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-car" aria-hidden="true"></i> car</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-fighter-jet" aria-hidden="true"></i> fighter-jet</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-motorcycle" aria-hidden="true"></i> motorcycle</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-plane" aria-hidden="true"></i> plane</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-rocket" aria-hidden="true"></i> rocket</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-ship" aria-hidden="true"></i> ship</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-space-shuttle" aria-hidden="true"></i> space-shuttle</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-subway" aria-hidden="true"></i> subway</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-taxi" aria-hidden="true"></i> taxi</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-train" aria-hidden="true"></i> train</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-truck" aria-hidden="true"></i> truck</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-wheelchair" aria-hidden="true"></i> wheelchair</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-wheelchair-alt" aria-hidden="true"></i> wheelchair-alt</a> </div>
            </div>
        </section>
        <section id="gender" class="mainParts">
            <h2 class="page-header">性别</h2>
            <div class="row fontawesome-icon-list">
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-genderless" aria-hidden="true"></i> genderless</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-intersex" aria-hidden="true"></i> intersex <span class="text-muted">(alias)</span></a> </span>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-mars" aria-hidden="true"></i> mars</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-mars-double" aria-hidden="true"></i> mars-double</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-mars-stroke" aria-hidden="true"></i> mars-stroke</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-mars-stroke-h" aria-hidden="true"></i> mars-stroke-h</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-mars-stroke-v" aria-hidden="true"></i> mars-stroke-v</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-mercury" aria-hidden="true"></i> mercury</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-neuter" aria-hidden="true"></i> neuter</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-transgender" aria-hidden="true"></i> transgender</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-transgender-alt" aria-hidden="true"></i> transgender-alt</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-venus" aria-hidden="true"></i> venus</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-venus-double" aria-hidden="true"></i> venus-double</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-venus-mars" aria-hidden="true"></i> venus-mars</a> </div>
            </div>
        </section>
        <section id="file-type" class="mainParts">
            <h2 class="page-header">文件类型</h2>
            <div class="row fontawesome-icon-list">
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-file" aria-hidden="true"></i> file</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-file-archive-o" aria-hidden="true"></i> file-archive-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-file-audio-o" aria-hidden="true"></i> file-audio-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-file-code-o" aria-hidden="true"></i> file-code-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-file-excel-o" aria-hidden="true"></i> file-excel-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-file-image-o" aria-hidden="true"></i> file-image-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-file-movie-o" aria-hidden="true"></i> file-movie-o <span class="text-muted">(alias)</span></a> </span>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-file-o" aria-hidden="true"></i> file-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-file-pdf-o" aria-hidden="true"></i> file-pdf-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-file-photo-o" aria-hidden="true"></i> file-photo-o <span class="text-muted">(alias)</span></a> </span>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-file-picture-o" aria-hidden="true"></i> file-picture-o <span class="text-muted">(alias)</span></a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-file-powerpoint-o" aria-hidden="true"></i> file-powerpoint-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-file-sound-o" aria-hidden="true"></i> file-sound-o <span class="text-muted">(alias)</span></a> </span>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-file-text" aria-hidden="true"></i> file-text</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-file-text-o" aria-hidden="true"></i> file-text-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-file-video-o" aria-hidden="true"></i> file-video-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-file-word-o" aria-hidden="true"></i> file-word-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-file-zip-o" aria-hidden="true"></i> file-zip-o <span class="text-muted">(alias)</span></a> </span>
                </div>
            </div>
        </section>
        <section id="spinner" class="mainParts">
            <h2 class="page-header">可旋转</h2>
            <div class="row fontawesome-icon-list">
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-circle-o-notch" aria-hidden="true"></i> circle-o-notch</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-cog" aria-hidden="true"></i> cog</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-gear" aria-hidden="true"></i> gear <span class="text-muted">(alias)</span></a> </span>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-refresh" aria-hidden="true"></i> refresh</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-spinner" aria-hidden="true"></i> spinner</a> </div>
            </div>
        </section>
        <section id="form-control" class="mainParts">
            <h2 class="page-header">表单</h2>
            <div class="row fontawesome-icon-list">
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-check-square" aria-hidden="true"></i> check-square</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-check-square-o" aria-hidden="true"></i> check-square-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-circle" aria-hidden="true"></i> circle</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-circle-o" aria-hidden="true"></i> circle-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-dot-circle-o" aria-hidden="true"></i> dot-circle-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-minus-square" aria-hidden="true"></i> minus-square</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-minus-square-o" aria-hidden="true"></i> minus-square-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-plus-square" aria-hidden="true"></i> plus-square</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-plus-square-o" aria-hidden="true"></i> plus-square-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-square" aria-hidden="true"></i> square</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-square-o" aria-hidden="true"></i> square-o</a> </div>
            </div>
        </section>
        <section id="payment" class="mainParts">
            <h2 class="page-header">支付</h2>
            <div class="row fontawesome-icon-list">
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-cc-amex" aria-hidden="true"></i> cc-amex</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-cc-diners-club" aria-hidden="true"></i> cc-diners-club</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-cc-discover" aria-hidden="true"></i> cc-discover</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-cc-jcb" aria-hidden="true"></i> cc-jcb</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-cc-mastercard" aria-hidden="true"></i> cc-mastercard</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-cc-paypal" aria-hidden="true"></i> cc-paypal</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-cc-stripe" aria-hidden="true"></i> cc-stripe</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-cc-visa" aria-hidden="true"></i> cc-visa</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-credit-card" aria-hidden="true"></i> credit-card</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-credit-card-alt" aria-hidden="true"></i> credit-card-alt</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-google-wallet" aria-hidden="true"></i> google-wallet</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-paypal" aria-hidden="true"></i> paypal</a> </div>
            </div>
        </section>
        <section id="chart" class="mainParts">
            <h2 class="page-header">图表</h2>
            <div class="row fontawesome-icon-list">
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-area-chart" aria-hidden="true"></i> area-chart</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-bar-chart" aria-hidden="true"></i> bar-chart</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-bar-chart-o" aria-hidden="true"></i> bar-chart-o <span class="text-muted">(alias)</span></a> </span>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-line-chart" aria-hidden="true"></i> line-chart</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-pie-chart" aria-hidden="true"></i> pie-chart</a> </div>
            </div>
        </section>
        <section id="currency" class="mainParts">
            <h2 class="page-header">货币</h2>
            <div class="row fontawesome-icon-list">
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-bitcoin" aria-hidden="true"></i> bitcoin <span class="text-muted">(alias)</span></a> </span>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-btc" aria-hidden="true"></i> btc</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-cny" aria-hidden="true"></i> cny <span class="text-muted">(alias)</span></a> </span>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-dollar" aria-hidden="true"></i> dollar <span class="text-muted">(alias)</span></a> </span>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-eur" aria-hidden="true"></i> eur</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-euro" aria-hidden="true"></i> euro <span class="text-muted">(alias)</span></a> </span>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-gbp" aria-hidden="true"></i> gbp</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-gg" aria-hidden="true"></i>
                        <span class="sr-only">Example of </span>gg</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-gg-circle" aria-hidden="true"></i> gg-circle</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-ils" aria-hidden="true"></i> ils</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-inr" aria-hidden="true"></i> inr</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-jpy" aria-hidden="true"></i> jpy</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-krw" aria-hidden="true"></i> krw</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-money" aria-hidden="true"></i> money</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-rmb" aria-hidden="true"></i> rmb <span class="text-muted">(alias)</span></a> </span>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-rouble" aria-hidden="true"></i> rouble <span class="text-muted">(alias)</span></a> </span>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-rub" aria-hidden="true"></i> rub</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-ruble" aria-hidden="true"></i> ruble <span class="text-muted">(alias)</span></a> </span>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-rupee" aria-hidden="true"></i> rupee <span class="text-muted">(alias)</span></a> </span>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-shekel" aria-hidden="true"></i> shekel <span class="text-muted">(alias)</span></a> </span>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-sheqel" aria-hidden="true"></i> sheqel <span class="text-muted">(alias)</span></a> </span>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-try" aria-hidden="true"></i> try</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-turkish-lira" aria-hidden="true"></i> turkish-lira <span class="text-muted">(alias)</span></a> </span>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-usd" aria-hidden="true"></i> usd</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-won" aria-hidden="true"></i> won <span class="text-muted">(alias)</span></a> </span>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-yen" aria-hidden="true"></i> yen <span class="text-muted">(alias)</span></a> </span>
                </div>
            </div>
        </section>
        <section id="text-editor" class="mainParts">
            <h2 class="page-header">文本编辑</h2>
            <div class="row fontawesome-icon-list">
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-align-center" aria-hidden="true"></i> align-center</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-align-justify" aria-hidden="true"></i> align-justify</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-align-left" aria-hidden="true"></i> align-left</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-align-right" aria-hidden="true"></i> align-right</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-bold" aria-hidden="true"></i> bold</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-chain" aria-hidden="true"></i> chain <span class="text-muted">(alias)</span></a> </span>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-chain-broken" aria-hidden="true"></i> chain-broken</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-clipboard" aria-hidden="true"></i> clipboard</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-columns" aria-hidden="true"></i> columns</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-copy" aria-hidden="true"></i> copy <span class="text-muted">(alias)</span></a> </span>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-cut" aria-hidden="true"></i> cut <span class="text-muted">(alias)</span></a> </span>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-dedent" aria-hidden="true"></i> dedent <span class="text-muted">(alias)</span></a> </span>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-eraser" aria-hidden="true"></i> eraser</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-file" aria-hidden="true"></i> file</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-file-o" aria-hidden="true"></i> file-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-file-text" aria-hidden="true"></i> file-text</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-file-text-o" aria-hidden="true"></i> file-text-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-files-o" aria-hidden="true"></i> files-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-floppy-o" aria-hidden="true"></i> floppy-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-font" aria-hidden="true"></i> font</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-header" aria-hidden="true"></i> header</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-indent" aria-hidden="true"></i> indent</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-italic" aria-hidden="true"></i> italic</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-link" aria-hidden="true"></i> link</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-list" aria-hidden="true"></i> list</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-list-alt" aria-hidden="true"></i> list-alt</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-list-ol" aria-hidden="true"></i> list-ol</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-list-ul" aria-hidden="true"></i> list-ul</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-outdent" aria-hidden="true"></i> outdent</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-paperclip" aria-hidden="true"></i> paperclip</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-paragraph" aria-hidden="true"></i> paragraph</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-paste" aria-hidden="true"></i> paste <span class="text-muted">(alias)</span></a> </span>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-repeat" aria-hidden="true"></i> repeat</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-rotate-left" aria-hidden="true"></i> rotate-left <span class="text-muted">(alias)</span></a> </span>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-rotate-right" aria-hidden="true"></i> rotate-right <span class="text-muted">(alias)</span></a> </span>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-save" aria-hidden="true"></i> save <span class="text-muted">(alias)</span></a> </span>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-scissors" aria-hidden="true"></i> scissors</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-strikethrough" aria-hidden="true"></i> strikethrough</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-subscript" aria-hidden="true"></i> subscript</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-superscript" aria-hidden="true"></i> superscript</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-table" aria-hidden="true"></i> table</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-text-height" aria-hidden="true"></i> text-height</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-text-width" aria-hidden="true"></i> text-width</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-th" aria-hidden="true"></i>
                        <span class="sr-only">Example of </span>th</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-th-large" aria-hidden="true"></i> th-large</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-th-list" aria-hidden="true"></i> th-list</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-underline" aria-hidden="true"></i> underline</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-undo" aria-hidden="true"></i> undo</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-unlink" aria-hidden="true"></i> unlink <span class="text-muted">(alias)</span></a> </span>
                </div>
            </div>
        </section>
        <section id="directional" class="mainParts">
            <h2 class="page-header">指示方向</h2>
            <div class="row fontawesome-icon-list">
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-angle-double-down" aria-hidden="true"></i> angle-double-down</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-angle-double-left" aria-hidden="true"></i> angle-double-left</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-angle-double-right" aria-hidden="true"></i> angle-double-right</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-angle-double-up" aria-hidden="true"></i> angle-double-up</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-angle-down" aria-hidden="true"></i> angle-down</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-angle-left" aria-hidden="true"></i> angle-left</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-angle-right" aria-hidden="true"></i> angle-right</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-angle-up" aria-hidden="true"></i> angle-up</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-arrow-circle-down" aria-hidden="true"></i> arrow-circle-down</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-arrow-circle-left" aria-hidden="true"></i> arrow-circle-left</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-arrow-circle-o-down" aria-hidden="true"></i> arrow-circle-o-down</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-arrow-circle-o-left" aria-hidden="true"></i> arrow-circle-o-left</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> arrow-circle-o-right</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-arrow-circle-o-up" aria-hidden="true"></i> arrow-circle-o-up</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-arrow-circle-right" aria-hidden="true"></i> arrow-circle-right</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-arrow-circle-up" aria-hidden="true"></i> arrow-circle-up</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-arrow-down" aria-hidden="true"></i> arrow-down</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-arrow-left" aria-hidden="true"></i> arrow-left</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-arrow-right" aria-hidden="true"></i> arrow-right</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-arrow-up" aria-hidden="true"></i> arrow-up</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-arrows" aria-hidden="true"></i> arrows</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-arrows-alt" aria-hidden="true"></i> arrows-alt</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-arrows-h" aria-hidden="true"></i> arrows-h</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-arrows-v" aria-hidden="true"></i> arrows-v</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-caret-down" aria-hidden="true"></i> caret-down</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-caret-left" aria-hidden="true"></i> caret-left</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-caret-right" aria-hidden="true"></i> caret-right</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-caret-square-o-down" aria-hidden="true"></i> caret-square-o-down</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-caret-square-o-left" aria-hidden="true"></i> caret-square-o-left</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-caret-square-o-right" aria-hidden="true"></i> caret-square-o-right</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-caret-square-o-up" aria-hidden="true"></i> caret-square-o-up</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-caret-up" aria-hidden="true"></i> caret-up</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-chevron-circle-down" aria-hidden="true"></i> chevron-circle-down</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-chevron-circle-left" aria-hidden="true"></i> chevron-circle-left</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-chevron-circle-right" aria-hidden="true"></i> chevron-circle-right</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-chevron-circle-up" aria-hidden="true"></i> chevron-circle-up</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-chevron-down" aria-hidden="true"></i> chevron-down</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-chevron-left" aria-hidden="true"></i> chevron-left</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-chevron-right" aria-hidden="true"></i> chevron-right</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-chevron-up" aria-hidden="true"></i> chevron-up</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-exchange" aria-hidden="true"></i> exchange</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-hand-o-down" aria-hidden="true"></i> hand-o-down</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-hand-o-left" aria-hidden="true"></i> hand-o-left</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-hand-o-right" aria-hidden="true"></i> hand-o-right</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-hand-o-up" aria-hidden="true"></i> hand-o-up</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-long-arrow-down" aria-hidden="true"></i> long-arrow-down</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-long-arrow-left" aria-hidden="true"></i> long-arrow-left</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-long-arrow-right" aria-hidden="true"></i> long-arrow-right</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-long-arrow-up" aria-hidden="true"></i> long-arrow-up</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-toggle-down" aria-hidden="true"></i> toggle-down <span class="text-muted">(alias)</span></a> </span>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-toggle-left" aria-hidden="true"></i> toggle-left <span class="text-muted">(alias)</span></a> </span>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-toggle-right" aria-hidden="true"></i> toggle-right <span class="text-muted">(alias)</span></a> </span>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-toggle-up" aria-hidden="true"></i> toggle-up <span class="text-muted">(alias)</span></a> </span>
                </div>
            </div>
        </section>
        <section id="video-player" class="mainParts">
            <h2 class="page-header">视频播放</h2>
            <div class="row fontawesome-icon-list">
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-arrows-alt" aria-hidden="true"></i><span class="sr-only">Example of </span>arrows-alt</a>
                    </span>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-backward" aria-hidden="true"></i> backward</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-compress" aria-hidden="true"></i> compress</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-eject" aria-hidden="true"></i> eject</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-expand" aria-hidden="true"></i> expand</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-fast-backward" aria-hidden="true"></i> fast-backward</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-fast-forward" aria-hidden="true"></i> fast-forward</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-forward" aria-hidden="true"></i> forward</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-pause" aria-hidden="true"></i> pause</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-pause-circle" aria-hidden="true"></i> pause-circle</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-pause-circle-o" aria-hidden="true"></i> pause-circle-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-play" aria-hidden="true"></i> play</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-play-circle" aria-hidden="true"></i> play-circle</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-play-circle-o" aria-hidden="true"></i> play-circle-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-random" aria-hidden="true"></i> random</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-step-backward" aria-hidden="true"></i> step-backward</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-step-forward" aria-hidden="true"></i> step-forward</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-stop" aria-hidden="true"></i> stop</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-stop-circle" aria-hidden="true"></i> stop-circle</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-stop-circle-o" aria-hidden="true"></i> stop-circle-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-youtube-play" aria-hidden="true"></i> youtube-play</a> </div>
            </div>
        </section>
        <section id="brand" class="mainParts">
            <h2 class="page-header">标志</h2>
            <div class="row fontawesome-icon-list margin-bottom-lg">
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-500px" aria-hidden="true"></i> 500px</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-adn" aria-hidden="true"></i> adn</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-amazon" aria-hidden="true"></i> amazon</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-android" aria-hidden="true"></i> android</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-angellist" aria-hidden="true"></i> angellist</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-apple" aria-hidden="true"></i> apple</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-bandcamp" aria-hidden="true"></i> bandcamp</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-behance" aria-hidden="true"></i> behance</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-behance-square" aria-hidden="true"></i> behance-square</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-bitbucket" aria-hidden="true"></i> bitbucket</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-bitbucket-square" aria-hidden="true"></i> bitbucket-square</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-bitcoin" aria-hidden="true"></i> bitcoin <span class="text-muted">(alias)</span></a> </span>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-black-tie" aria-hidden="true"></i> black-tie</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-bluetooth" aria-hidden="true"></i> bluetooth</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-bluetooth-b" aria-hidden="true"></i> bluetooth-b</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-btc" aria-hidden="true"></i> btc</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-buysellads" aria-hidden="true"></i> buysellads</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-cc-amex" aria-hidden="true"></i> cc-amex</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-cc-diners-club" aria-hidden="true"></i> cc-diners-club</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-cc-discover" aria-hidden="true"></i> cc-discover</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-cc-jcb" aria-hidden="true"></i> cc-jcb</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-cc-mastercard" aria-hidden="true"></i> cc-mastercard</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-cc-paypal" aria-hidden="true"></i> cc-paypal</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-cc-stripe" aria-hidden="true"></i> cc-stripe</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-cc-visa" aria-hidden="true"></i> cc-visa</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-chrome" aria-hidden="true"></i> chrome</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-codepen" aria-hidden="true"></i> codepen</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-codiepie" aria-hidden="true"></i> codiepie</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-connectdevelop" aria-hidden="true"></i> connectdevelop</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-contao" aria-hidden="true"></i> contao</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-css3" aria-hidden="true"></i> css3</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-dashcube" aria-hidden="true"></i> dashcube</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-delicious" aria-hidden="true"></i> delicious</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-deviantart" aria-hidden="true"></i> deviantart</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-digg" aria-hidden="true"></i> digg</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-dribbble" aria-hidden="true"></i> dribbble</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-dropbox" aria-hidden="true"></i> dropbox</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-drupal" aria-hidden="true"></i> drupal</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-edge" aria-hidden="true"></i> edge</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-eercast" aria-hidden="true"></i> eercast</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-empire" aria-hidden="true"></i> empire</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-envira" aria-hidden="true"></i> envira</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-etsy" aria-hidden="true"></i> etsy</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-expeditedssl" aria-hidden="true"></i> expeditedssl</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-fa" aria-hidden="true"></i>
                        <span class="sr-only">Example of </span>fa <span class="text-muted">(alias)</span></a> </span>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-facebook" aria-hidden="true"></i> facebook</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-facebook-f" aria-hidden="true"></i> facebook-f <span class="text-muted">(alias)</span></a> </span>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-facebook-official" aria-hidden="true"></i> facebook-official</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-facebook-square" aria-hidden="true"></i> facebook-square</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-firefox" aria-hidden="true"></i> firefox</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-first-order" aria-hidden="true"></i> first-order</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-flickr" aria-hidden="true"></i> flickr</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-font-awesome" aria-hidden="true"></i> font-awesome</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-fonticons" aria-hidden="true"></i> fonticons</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-fort-awesome" aria-hidden="true"></i> fort-awesome</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-forumbee" aria-hidden="true"></i> forumbee</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-foursquare" aria-hidden="true"></i> foursquare</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-free-code-camp" aria-hidden="true"></i> free-code-camp</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-ge" aria-hidden="true"></i>
                        <span class="sr-only">Example of </span>ge <span class="text-muted">(alias)</span></a> </span>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-get-pocket" aria-hidden="true"></i> get-pocket</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-gg" aria-hidden="true"></i>
                        <span class="sr-only">Example of </span>gg</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-gg-circle" aria-hidden="true"></i> gg-circle</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-git" aria-hidden="true"></i> git</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-git-square" aria-hidden="true"></i> git-square</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-github" aria-hidden="true"></i> github</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-github-alt" aria-hidden="true"></i> github-alt</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-github-square" aria-hidden="true"></i> github-square</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-gitlab" aria-hidden="true"></i> gitlab</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-gittip" aria-hidden="true"></i> gittip <span class="text-muted">(alias)</span></a> </span>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-glide" aria-hidden="true"></i> glide</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-glide-g" aria-hidden="true"></i> glide-g</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-google" aria-hidden="true"></i> google</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-google-plus" aria-hidden="true"></i> google-plus</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-google-plus-circle" aria-hidden="true"></i> google-plus-circle <span class="text-muted">(alias)</span></a> </span>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-google-plus-official" aria-hidden="true"></i> google-plus-official</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-google-plus-square" aria-hidden="true"></i> google-plus-square</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-google-wallet" aria-hidden="true"></i> google-wallet</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-gratipay" aria-hidden="true"></i> gratipay</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-grav" aria-hidden="true"></i> grav</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-hacker-news" aria-hidden="true"></i> hacker-news</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-houzz" aria-hidden="true"></i> houzz</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-html5" aria-hidden="true"></i> html5</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-imdb" aria-hidden="true"></i> imdb</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-instagram" aria-hidden="true"></i> instagram</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-internet-explorer" aria-hidden="true"></i> internet-explorer</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-ioxhost" aria-hidden="true"></i> ioxhost</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-joomla" aria-hidden="true"></i> joomla</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-jsfiddle" aria-hidden="true"></i> jsfiddle</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-lastfm" aria-hidden="true"></i> lastfm</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-lastfm-square" aria-hidden="true"></i> lastfm-square</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-leanpub" aria-hidden="true"></i> leanpub</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-linkedin" aria-hidden="true"></i> linkedin</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-linkedin-square" aria-hidden="true"></i> linkedin-square</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-linode" aria-hidden="true"></i> linode</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-linux" aria-hidden="true"></i> linux</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-maxcdn" aria-hidden="true"></i> maxcdn</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-meanpath" aria-hidden="true"></i> meanpath</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-medium" aria-hidden="true"></i> medium</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-meetup" aria-hidden="true"></i> meetup</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-mixcloud" aria-hidden="true"></i> mixcloud</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-modx" aria-hidden="true"></i> modx</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-odnoklassniki" aria-hidden="true"></i> odnoklassniki</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-odnoklassniki-square" aria-hidden="true"></i> odnoklassniki-square</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-opencart" aria-hidden="true"></i> opencart</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-openid" aria-hidden="true"></i> openid</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-opera" aria-hidden="true"></i> opera</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-optin-monster" aria-hidden="true"></i> optin-monster</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-pagelines" aria-hidden="true"></i> pagelines</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-paypal" aria-hidden="true"></i> paypal</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-pied-piper" aria-hidden="true"></i> pied-piper</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-pied-piper-alt" aria-hidden="true"></i> pied-piper-alt</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-pied-piper-pp" aria-hidden="true"></i> pied-piper-pp</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-pinterest" aria-hidden="true"></i> pinterest</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-pinterest-p" aria-hidden="true"></i> pinterest-p</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-pinterest-square" aria-hidden="true"></i> pinterest-square</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-product-hunt" aria-hidden="true"></i> product-hunt</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-qq" aria-hidden="true"></i>
                        <span class="sr-only">Example of </span>qq</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-quora" aria-hidden="true"></i> quora</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-ra" aria-hidden="true"></i>
                        <span class="sr-only">Example of </span>ra <span class="text-muted">(alias)</span></a> </span>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-ravelry" aria-hidden="true"></i> ravelry</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-rebel" aria-hidden="true"></i> rebel</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-reddit" aria-hidden="true"></i> reddit</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-reddit-alien" aria-hidden="true"></i> reddit-alien</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-reddit-square" aria-hidden="true"></i> reddit-square</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-renren" aria-hidden="true"></i> renren</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-resistance" aria-hidden="true"></i> resistance <span class="text-muted">(alias)</span></a> </span>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-safari" aria-hidden="true"></i> safari</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-scribd" aria-hidden="true"></i> scribd</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-sellsy" aria-hidden="true"></i> sellsy</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-share-alt" aria-hidden="true"></i> share-alt</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-share-alt-square" aria-hidden="true"></i> share-alt-square</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-shirtsinbulk" aria-hidden="true"></i> shirtsinbulk</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-simplybuilt" aria-hidden="true"></i> simplybuilt</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-skyatlas" aria-hidden="true"></i> skyatlas</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-skype" aria-hidden="true"></i> skype</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-slack" aria-hidden="true"></i> slack</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-slideshare" aria-hidden="true"></i> slideshare</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-snapchat" aria-hidden="true"></i> snapchat</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-snapchat-ghost" aria-hidden="true"></i> snapchat-ghost</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-snapchat-square" aria-hidden="true"></i> snapchat-square</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-soundcloud" aria-hidden="true"></i> soundcloud</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-spotify" aria-hidden="true"></i> spotify</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-stack-exchange" aria-hidden="true"></i> stack-exchange</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-stack-overflow" aria-hidden="true"></i> stack-overflow</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-steam" aria-hidden="true"></i> steam</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-steam-square" aria-hidden="true"></i> steam-square</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-stumbleupon" aria-hidden="true"></i> stumbleupon</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-stumbleupon-circle" aria-hidden="true"></i> stumbleupon-circle</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-superpowers" aria-hidden="true"></i> superpowers</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-telegram" aria-hidden="true"></i> telegram</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-tencent-weibo" aria-hidden="true"></i> tencent-weibo</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-themeisle" aria-hidden="true"></i> themeisle</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-trello" aria-hidden="true"></i> trello</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-tripadvisor" aria-hidden="true"></i> tripadvisor</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-tumblr" aria-hidden="true"></i> tumblr</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-tumblr-square" aria-hidden="true"></i> tumblr-square</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-twitch" aria-hidden="true"></i> twitch</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-twitter" aria-hidden="true"></i> twitter</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-twitter-square" aria-hidden="true"></i> twitter-square</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-usb" aria-hidden="true"></i> usb</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-viacoin" aria-hidden="true"></i> viacoin</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-viadeo" aria-hidden="true"></i> viadeo</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-viadeo-square" aria-hidden="true"></i> viadeo-square</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-vimeo" aria-hidden="true"></i> vimeo</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-vimeo-square" aria-hidden="true"></i> vimeo-square</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-vine" aria-hidden="true"></i> vine</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-vk" aria-hidden="true"></i>
                        <span class="sr-only">Example of </span>vk</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-wechat" aria-hidden="true"></i> wechat <span class="text-muted">(alias)</span></a> </span>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-weibo" aria-hidden="true"></i> weibo</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-weixin" aria-hidden="true"></i> weixin</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-whatsapp" aria-hidden="true"></i> whatsapp</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-wikipedia-w" aria-hidden="true"></i> wikipedia-w</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-windows" aria-hidden="true"></i> windows</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-wordpress" aria-hidden="true"></i> wordpress</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-wpbeginner" aria-hidden="true"></i> wpbeginner</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-wpexplorer" aria-hidden="true"></i> wpexplorer</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-wpforms" aria-hidden="true"></i> wpforms</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-xing" aria-hidden="true"></i> xing</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-xing-square" aria-hidden="true"></i> xing-square</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-y-combinator" aria-hidden="true"></i> y-combinator</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-y-combinator-square" aria-hidden="true"></i> y-combinator-square <span class="text-muted">(alias)</span></a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-yahoo" aria-hidden="true"></i> yahoo</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-yc" aria-hidden="true"></i>
                        <span class="sr-only">Example of </span>yc <span class="text-muted">(alias)</span></a> </span>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-yc-square" aria-hidden="true"></i> yc-square <span class="text-muted">(alias)</span></a> </span>
                </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-yelp" aria-hidden="true"></i> yelp</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-yoast" aria-hidden="true"></i> yoast</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-youtube" aria-hidden="true"></i> youtube</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-youtube-play" aria-hidden="true"></i> youtube-play</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-youtube-square" aria-hidden="true"></i> youtube-square</a> </div>
            </div>
        </section>
        <section id="medical" class="mainParts">
            <h2 class="page-header">医疗</h2>
            <div class="row fontawesome-icon-list">
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-ambulance" aria-hidden="true"></i> ambulance</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-h-square" aria-hidden="true"></i> h-square</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-heart" aria-hidden="true"></i> heart</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-heart-o" aria-hidden="true"></i> heart-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-heartbeat" aria-hidden="true"></i> heartbeat</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-hospital-o" aria-hidden="true"></i> hospital-o</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-medkit" aria-hidden="true"></i> medkit</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-plus-square" aria-hidden="true"></i> plus-square</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-stethoscope" aria-hidden="true"></i> stethoscope</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-user-md" aria-hidden="true"></i> user-md</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-wheelchair" aria-hidden="true"></i> wheelchair</a> </div>
                <div class="fa-hover col-md-3 col-sm-4">
                    <a class="col-xs-11"><i class="fa fa-wheelchair-alt" aria-hidden="true"></i> wheelchair-alt</a> </div>
            </div>
        </section>
    </div>
</div>
<script src="static/js/jquery-3.1.1.min.js"></script>
<script src="static/js/bootstrap.min.js"></script>
<script src="static/js/vue.min.js"></script>
<script>
    $(function () {
        $('#range').on('input change',function(){
            var value = $('#range').val();
            $('.output').html(value);
            $('.iconItem i').css('font-size',(value+'px'));
        });

        'use strict';
        var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj; };
        function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
        var END = 'change';
        var START = 'ontouchstart' in document ? 'touchstart' : 'mousedown';
        var INPUT = 'input';
        var MAX_ROTATION = 35;
        var SOFTEN_FACTOR = 3;
        var RangeInput = function () {
            function RangeInput(el) {
                _classCallCheck(this, RangeInput);
                this.el = el;
                this._handleEnd = this._handleEnd.bind(this);
                this._handleStart = this._handleStart.bind(this);
                this._handleInput = this._handleInput.bind(this);

                //Call the plugin
                $(this.el.querySelector('input[type=range]')).rangeslider({
                    polyfill: false, //Never use the native polyfill
                    rangeClass: 'rangeslider',
                    disabledClass: 'rangeslider-disabled',
                    horizontalClass: 'rangeslider-horizontal',
                    verticalClass: 'rangeslider-vertical',
                    fillClass: 'rangeslider-fill-lower',
                    handleClass: 'rangeslider-thumb',
                    onInit: function onInit() {
                        //No args are passed, so we can't change context of this
                        var pluginInstance = this;

                        //Move the range-output inside the handle so we can do all the stuff in css
                        $(pluginInstance.$element).parents('.range').find('.range-output').appendTo(pluginInstance.$handle);
                    }
                });
                this.sliderThumbEl = el.querySelector('.rangeslider-thumb');
                this.outputEl = el.querySelector('.range-output');
                this.inputEl = el.querySelector('input[type=range]');
                this._lastOffsetLeft = 0;
                this._lastTimeStamp = 0;
                this.el.querySelector('.rangeslider').addEventListener(START, this._handleStart);
            }
            RangeInput.prototype._handleStart = function _handleStart(e) {
                var _this = this;
                this._lastTimeStamp = new Date().getTime();
                this._lastOffsetLeft = this.sliderThumbEl.offsetLeft;
                //Wrap in raf because offsetLeft is updated by the plugin after this fires
                requestAnimationFrame(function (_) {
                    //Bind through jquery because plugin doesn't fire native event
                    $(_this.inputEl).on(INPUT, _this._handleInput);
                    $(_this.inputEl).on(END, _this._handleEnd);
                });
            };
            RangeInput.prototype._handleEnd = function _handleEnd(e) {
                var _this2 = this;
                //Unbind through jquery because plugin doesn't fire native event
                $(this.inputEl).off(INPUT, this._handleInput);
                $(this.inputEl).off(END, this._handleEnd);
                requestAnimationFrame(function (_) {
                    return _this2.outputEl.style.transform = 'rotate(0deg)';
                });
            };
            RangeInput.prototype._handleInput = function _handleInput(e) {
                var _this3 = this;
                var now = new Date().getTime();
                var timeElapsed = now - this._lastTimeStamp || 1;
                var distance = this.sliderThumbEl.offsetLeft - this._lastOffsetLeft;
                var direction = distance < 0 ? -1 : 1;
                var velocity = Math.abs(distance) / timeElapsed; //pixels / millisecond
                var targetRotation = Math.min(Math.abs(distance * velocity) * SOFTEN_FACTOR, MAX_ROTATION);
                requestAnimationFrame(function (_) {
                    return _this3.outputEl.style.transform = 'rotate(' + targetRotation * -direction + 'deg)';
                });
                this._lastTimeStamp = now;
                this._lastOffsetLeft = this.sliderThumbEl.offsetLeft;
            };
            return RangeInput;
        }();
        /*! rangeslider.js - v2.1.1 | (c) 2016 @andreruffert | MIT license | https://github.com/andreruffert/rangeslider.js */
        !function (a) {
            "use strict";
            "function" == typeof define && define.amd ? define(["jquery"], a) : "object" == (typeof exports === 'undefined' ? 'undefined' : _typeof(exports)) ? module.exports = a(require("jquery")) : a(jQuery);
        }(function (a) {
            "use strict";
            function b() {
                var a = document.createElement("input");return a.setAttribute("type", "range"), "text" !== a.type;
            }function c(a, b) {
                var c = Array.prototype.slice.call(arguments, 2);return setTimeout(function () {
                    return a.apply(null, c);
                }, b);
            }function d(a, b) {
                return b = b || 100, function () {
                    if (!a.debouncing) {
                        var c = Array.prototype.slice.apply(arguments);a.lastReturnVal = a.apply(window, c), a.debouncing = !0;
                    }return clearTimeout(a.debounceTimeout), a.debounceTimeout = setTimeout(function () {
                        a.debouncing = !1;
                    }, b), a.lastReturnVal;
                };
            }function e(a) {
                return a && (0 === a.offsetWidth || 0 === a.offsetHeight || a.open === !1);
            }function f(a) {
                for (var b = [], c = a.parentNode; e(c);) {
                    b.push(c), c = c.parentNode;
                }return b;
            }function g(a, b) {
                function c(a) {
                    "undefined" != typeof a.open && (a.open = a.open ? !1 : !0);
                }var d = f(a),
                    e = d.length,
                    g = [],
                    h = a[b];if (e) {
                    for (var i = 0; e > i; i++) {
                        g[i] = d[i].style.cssText, d[i].style.setProperty ? d[i].style.setProperty("display", "block", "important") : d[i].style.cssText += ";display: block !important", d[i].style.height = "0", d[i].style.overflow = "hidden", d[i].style.visibility = "hidden", c(d[i]);
                    }h = a[b];for (var j = 0; e > j; j++) {
                        d[j].style.cssText = g[j], c(d[j]);
                    }
                }return h;
            }function h(a, b) {
                var c = parseFloat(a);return Number.isNaN(c) ? b : c;
            }function i(a) {
                return a.charAt(0).toUpperCase() + a.substr(1);
            }function j(b, e) {
                if (this.$window = a(window), this.$document = a(document), this.$element = a(b), this.options = a.extend({}, n, e), this.polyfill = this.options.polyfill, this.orientation = this.$element[0].getAttribute("data-orientation") || this.options.orientation, this.onInit = this.options.onInit, this.onSlide = this.options.onSlide, this.onSlideEnd = this.options.onSlideEnd, this.DIMENSION = o.orientation[this.orientation].dimension, this.DIRECTION = o.orientation[this.orientation].direction, this.DIRECTION_STYLE = o.orientation[this.orientation].directionStyle, this.COORDINATE = o.orientation[this.orientation].coordinate, this.polyfill && m) return !1;this.identifier = "js-" + k + "-" + l++, this.startEvent = this.options.startEvent.join("." + this.identifier + " ") + "." + this.identifier, this.moveEvent = this.options.moveEvent.join("." + this.identifier + " ") + "." + this.identifier, this.endEvent = this.options.endEvent.join("." + this.identifier + " ") + "." + this.identifier, this.toFixed = (this.step + "").replace(".", "").length - 1, this.$fill = a('<div class="' + this.options.fillClass + '" />'), this.$handle = a('<div class="' + this.options.handleClass + '" />'), this.$range = a('<div class="' + this.options.rangeClass + " " + this.options[this.orientation + "Class"] + '" id="' + this.identifier + '" />').insertAfter(this.$element).prepend(this.$fill, this.$handle), this.$element.css({ position: "absolute", width: "1px", height: "1px", overflow: "hidden", opacity: "0" }), this.handleDown = a.proxy(this.handleDown, this), this.handleMove = a.proxy(this.handleMove, this), this.handleEnd = a.proxy(this.handleEnd, this), this.init();var f = this;this.$window.on("resize." + this.identifier, d(function () {
                    c(function () {
                        f.update(!1, !1);
                    }, 300);
                }, 20)), this.$document.on(this.startEvent, "#" + this.identifier + ":not(." + this.options.disabledClass + ")", this.handleDown), this.$element.on("change." + this.identifier, function (a, b) {
                    if (!b || b.origin !== f.identifier) {
                        var c = a.target.value,
                            d = f.getPositionFromValue(c);f.setPosition(d);
                    }
                });
            }Number.isNaN = Number.isNaN || function (a) {
                return "number" == typeof a && a !== a;
            };var k = "rangeslider",
                l = 0,
                m = b(),
                n = { polyfill: !0, orientation: "horizontal", rangeClass: "rangeslider", disabledClass: "rangeslider--disabled", horizontalClass: "rangeslider--horizontal", verticalClass: "rangeslider--vertical", fillClass: "rangeslider__fill", handleClass: "rangeslider__handle", startEvent: ["mousedown", "touchstart", "pointerdown"], moveEvent: ["mousemove", "touchmove", "pointermove"], endEvent: ["mouseup", "touchend", "pointerup"] },
                o = { orientation: { horizontal: { dimension: "width", direction: "left", directionStyle: "left", coordinate: "x" }, vertical: { dimension: "height", direction: "top", directionStyle: "bottom", coordinate: "y" } } };return j.prototype.init = function () {
                this.update(!0, !1), this.onInit && "function" == typeof this.onInit && this.onInit();
            }, j.prototype.update = function (a, b) {
                a = a || !1, a && (this.min = h(this.$element[0].getAttribute("min"), 0), this.max = h(this.$element[0].getAttribute("max"), 100), this.value = h(this.$element[0].value, Math.round(this.min + (this.max - this.min) / 2)), this.step = h(this.$element[0].getAttribute("step"), 1)), this.handleDimension = g(this.$handle[0], "offset" + i(this.DIMENSION)), this.rangeDimension = g(this.$range[0], "offset" + i(this.DIMENSION)), this.maxHandlePos = this.rangeDimension - this.handleDimension, this.grabPos = this.handleDimension / 2, this.position = this.getPositionFromValue(this.value), this.$element[0].disabled ? this.$range.addClass(this.options.disabledClass) : this.$range.removeClass(this.options.disabledClass), this.setPosition(this.position, b);
            }, j.prototype.handleDown = function (a) {
                if (this.$document.on(this.moveEvent, this.handleMove), this.$document.on(this.endEvent, this.handleEnd), !((" " + a.target.className + " ").replace(/[\n\t]/g, " ").indexOf(this.options.handleClass) > -1)) {
                    var b = this.getRelativePosition(a),
                        c = this.$range[0].getBoundingClientRect()[this.DIRECTION],
                        d = this.getPositionFromNode(this.$handle[0]) - c,
                        e = "vertical" === this.orientation ? this.maxHandlePos - (b - this.grabPos) : b - this.grabPos;this.setPosition(e), b >= d && b < d + this.handleDimension && (this.grabPos = b - d);
                }
            }, j.prototype.handleMove = function (a) {
                a.preventDefault();var b = this.getRelativePosition(a),
                    c = "vertical" === this.orientation ? this.maxHandlePos - (b - this.grabPos) : b - this.grabPos;this.setPosition(c);
            }, j.prototype.handleEnd = function (a) {
                a.preventDefault(), this.$document.off(this.moveEvent, this.handleMove), this.$document.off(this.endEvent, this.handleEnd), this.$element.trigger("change", { origin: this.identifier }), this.onSlideEnd && "function" == typeof this.onSlideEnd && this.onSlideEnd(this.position, this.value);
            }, j.prototype.cap = function (a, b, c) {
                return b > a ? b : a > c ? c : a;
            }, j.prototype.setPosition = function (a, b) {
                var c, d;void 0 === b && (b = !0), c = this.getValueFromPosition(this.cap(a, 0, this.maxHandlePos)), d = this.getPositionFromValue(c), this.$fill[0].style[this.DIMENSION] = d + this.grabPos + "px", this.$handle[0].style[this.DIRECTION_STYLE] = d + "px", this.setValue(c), this.position = d, this.value = c, b && this.onSlide && "function" == typeof this.onSlide && this.onSlide(d, c);
            }, j.prototype.getPositionFromNode = function (a) {
                for (var b = 0; null !== a;) {
                    b += a.offsetLeft, a = a.offsetParent;
                }return b;
            }, j.prototype.getRelativePosition = function (a) {
                var b = i(this.COORDINATE),
                    c = this.$range[0].getBoundingClientRect()[this.DIRECTION],
                    d = 0;return "undefined" != typeof a["page" + b] ? d = a["client" + b] : "undefined" != typeof a.originalEvent["client" + b] ? d = a.originalEvent["client" + b] : a.originalEvent.touches && a.originalEvent.touches[0] && "undefined" != typeof a.originalEvent.touches[0]["client" + b] ? d = a.originalEvent.touches[0]["client" + b] : a.currentPoint && "undefined" != typeof a.currentPoint[this.COORDINATE] && (d = a.currentPoint[this.COORDINATE]), d - c;
            }, j.prototype.getPositionFromValue = function (a) {
                var b, c;return b = (a - this.min) / (this.max - this.min), c = Number.isNaN(b) ? 0 : b * this.maxHandlePos;
            }, j.prototype.getValueFromPosition = function (a) {
                var b, c;return b = a / (this.maxHandlePos || 1), c = this.step * Math.round(b * (this.max - this.min) / this.step) + this.min, Number(c.toFixed(this.toFixed));
            }, j.prototype.setValue = function (a) {
                (a !== this.value || "" === this.$element[0].value) && this.$element.val(a).trigger("input", { origin: this.identifier });
            }, j.prototype.destroy = function () {
                this.$document.off("." + this.identifier), this.$window.off("." + this.identifier), this.$element.off("." + this.identifier).removeAttr("style").removeData("plugin_" + k), this.$range && this.$range.length && this.$range[0].parentNode.removeChild(this.$range[0]);
            }, a.fn[k] = function (b) {
                var c = Array.prototype.slice.call(arguments, 1);return this.each(function () {
                    var d = a(this),
                        e = d.data("plugin_" + k);e || d.data("plugin_" + k, e = new j(this, b)), "string" == typeof b && e[b].apply(e, c);
                });
            }, "rangeslider.js is available in jQuery context e.g $(selector).rangeslider(options);";
        });
        new RangeInput(document.querySelector('.range'));
    });
</script>
</body>
</html>